<template>
  <div class="run-log-com">
    <div class="log-header">
      <div class="log-btn">
        <span class="icon-btn" @click="logClose">
          <a-icon-font class="hover-pointer" type="iconicon-beifen-right" />
        </span>
        <span>系统日志</span>
      </div>
      <!-- <div class="log-btn">
        <span class="icon-btn">
          <a-icon-font class="hover-pointer" type="iconjiazai" />
          <span class="log-refresh">刷新</span>
        </span>
      </div> -->
    </div>
    <!--  log -->
    <div class="run-log-content scroll-bar">
      <!--   所选节点的最新日志 -->
      <div v-if="selectedNodeLog.length > 0" class="select-node-log">
        <a-divider :key="'select-node-log'">节点日志</a-divider>
        <p v-html="logStatusColor(selectedNodeLog)"></p>
      </div>
      <div v-if="runLogs.length > 0" class="log-text-box">
        <a-divider>pipeline运行日志(采样)</a-divider>
        <template v-for="(logs, logsIndex) in runLogs">
          <p
            v-for="(log, index) in logs"
            :key="logsIndex + '-' + index + 'log'"
            v-html="logStatusColor(log)"
          ></p>
          <a-divider
            v-if="fullRunlogs.length === 0"
            :key="logsIndex"
          ></a-divider>
        </template>
      </div>
      <div v-else class="empty-log">
        <img alt="" src="@/assets/view/empty2.png" />
        <p>暂无日志</p>
      </div>
      <div v-if="fullRunlogs.length > 0" class="log-text-box">
        <a-divider>pipeline运行日志(全量)</a-divider>
        <template v-for="(logs, logsIndex) in fullRunlogs">
          <p
            v-for="(log, index) in logs"
            :key="logsIndex + '-' + index + 'full-log'"
            v-html="logStatusColor(log)"
          ></p>
          <a-divider :key="`full-${logsIndex}`"></a-divider>
        </template>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator'
import DataViewStore from '@/store/modules/dataview'

@Component({
  components: {},
})
export default class RunLog extends Vue {
  private get runLogs() {
    return DataViewStore.runLogs
  }

  private get fullRunlogs() {
    return DataViewStore.fullRunLogs
  }

  public logStatusColor(log: string) {
    const title = log
    const success = 'SUCCESS'
    const fail = 'FAIL'
    let rep: any
    let responseDuring: string
    if (log.indexOf(success) > 0) {
      rep = new RegExp(success, 'g')
      responseDuring = `<span style='color: green; font-weight: 600;'>${success}</span>`
    } else if (log.indexOf(fail) > 0) {
      rep = new RegExp(fail, 'g')
      responseDuring = `<span style='color: red; font-weight: 600;'>${fail}</span>`
    } else {
      rep = new RegExp('', 'g')
      responseDuring = ''
    }
    return title.replace(rep, responseDuring)
  }
  // 选择的节点
  public get selectedNode() {
    return DataViewStore.selectNode
  }
  // 节点日志
  public get selectedNodeLog() {
    if (
      this.selectedNode &&
      DataViewStore.nodeStatusMap[String(this.selectedNode.id)]
    ) {
      const nodeStatusMap =
        DataViewStore.nodeStatusMap[String(this.selectedNode.id)]
      return `[${this.selectedNode.name}_${this.selectedNode.id}] [${
        nodeStatusMap.status
      }] [${nodeStatusMap.logInfo ? nodeStatusMap.logInfo : ''}]`
    }
    return ''
  }

  /**
   * 关闭日志
   */
  public logClose() {
    this.$emit('log-close')
  }
}
</script>

<style scoped lang="less">
.run-log-com {
  border-left: 1px solid #d8d8d8;
  height: 100%;
  overflow: hidden;
  width: 420px;

  .log-header {
    align-items: center;
    border-bottom: 1px solid #d8d8d8;
    display: flex;
    height: 38px;
    justify-content: space-between;
    overflow: hidden;
    padding: 0 16px 0 6px;

    .log-btn {
      display: flex;
      flex-shrink: 0;

      .icon-btn {
        align-items: center;
        border-radius: 2px;
        cursor: pointer;
        display: flex;
        font-size: 16px;
        margin-right: 6px;
        padding: 0 4px;

        .log-refresh {
          font-size: 14px;
          padding-left: 5px;
        }

        &:hover {
          background-color: #f1f1f1;
        }
      }
    }
  }

  /* 运行日志 内容 */
  .run-log-content {
    background-color: #fff;
    box-sizing: border-box;
    height: calc(100% - 38px);
    overflow: auto;
    width: 100%;

    /* 选择节点的日志 */
    .select-node-log {
      overflow: auto;
      padding: 0 12px;
      width: 100%;

      p {
        margin-bottom: 6px;
        /*word-break: break-all;*/
        word-wrap: break-word;
      }
    }

    /* 日志内容 */
    .log-text-box {
      overflow: auto;
      padding: 12px;
      width: 100%;

      p {
        margin-bottom: 6px;
        /*word-break: break-all;*/
        word-wrap: break-word;
      }
    }

    /* 日志为空 */
    .empty-log {
      align-items: center;
      display: flex;
      flex-direction: column;
      height: 100%;
      justify-content: center;
      width: 100%;

      img {
        margin-bottom: 6px;
        width: 200px;
      }
    }

    /deep/.ant-divider-inner-text {
      color: rgba(0, 0, 0, 0.5);
      font-size: 14px;
    }
  }
}

.scroll-bar {
  /* 滚动条 */
  &::-webkit-scrollbar {
    height: 6px;
    width: 6px;
  }

  &::-webkit-scrollbar-track {
    background: rgb(239, 239, 239);
    border-radius: 2px;
  }

  &::-webkit-scrollbar-thumb {
    background: #bfbfbf;
    border-radius: 6px;
  }

  &::-webkit-scrollbar-thumb:hover {
    background: #333;
  }

  &::-webkit-scrollbar-corner {
    background: rgb(239, 239, 239);
  }
}
</style>
